import { Component } from '@angular/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzMenuModule } from 'ng-zorro-antd/menu';

@Component({
  selector: 'app-menu-horizontal',
  standalone: true,
  imports: [NzMenuModule, NzIconModule],
  template: `
    <ul nz-menu nzMode="horizontal">
      <li nz-menu-item>
        <span nz-icon nzType="mail"></span>
        Navigation 1
      </li>
      <li nz-menu-item [nzDisabled]="true">
        <span nz-icon nzType="appstore"></span> Navigation 2
      </li>
      <li nz-submenu nzTitle="Navigation 3 - Submenu" nzIcon="setting">
        <ul>
          <li nz-menu-group nzTitle="Item 1">
            <ul>
              <li nz-menu-item>Option 1</li>
              <li nz-menu-item [nzDisabled]="true">Option 2</li>
            </ul>
          </li>
          <li nz-menu-group nzTitle="Item 2">
            <ul>
              <li nz-menu-item>Option 3</li>
              <li nz-menu-item>Option 4</li>
              <li nz-submenu nzTitle="Sub menu">
                <ul>
                  <li nz-menu-item>Option 5</li>
                  <li nz-menu-item>Option 6</li>
                </ul>
              </li>
              <li nz-submenu nzTitle="Sub menu 2" [nzDisabled]="true">
                <ul>
                  <li nz-menu-item>Option 7</li>
                  <li nz-menu-item>Option 8</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li nz-menu-item>
        <a href="/" target="_blank" rel="noopener noreferrer">
          Navigation 4 - link
        </a>
      </li>
    </ul>
  `,
})
export class MenuHorizontalComponent {}
